<html xmlns:wicket>
<head>
<wicket:head>
  <style type="text/css"></style>
</wicket:head>
</head>
<body>
<wicket:panel>
 <form wicket:id="form-mapping">

     <div class="row-fluid s-mapping">

         <div class="span5">

            <input type="text" id="unmapped-query" class="s-mapping-input" autocomplete="off" placeholder="Type to search"/>

            <!--table     -->
             <wicket:container wicket:id="checkgroup-unmapped">
                 <div  class="s-mapping-table">
                     <div class="s-mapping-header row-fluid">
                         <div class="span1 s-mapping-chb-item"><input type="checkbox" wicket:id="master-checkbox-unmap"/></div>
                         <div class="span11">Available <span wicket:id="unmapped-item-name"></span></div>
                     </div>
                     <ul id="unmapped-list" class="s-mapping-body unstyled">
                         <li class="s-mapping-row row-fluid" wicket:id="unmapped-list">
                             <div class="span1 s-mapping-chb-item"><input type="checkbox" wicket:id="selected" /></div>
                             <div class="span11" wicket:id="mapped-name"></div>
                         </li>
                     </ul>
                 </div>
             </wicket:container>
         </div>

         <div class="span2 s-mapping-middle">
             <input type="submit" value="Grant &gt;"wicket:id="add-items" class="btn span6"/>
              <br/><br/>
             <input type="submit" value="&lt; Prohibit"wicket:id="remove-items" class="btn span6"/>
         </div>

         <div class="span5">

             <input type="text" id="mapped-query" class="s-mapping-input" autocomplete="off" placeholder="Type to search"/>

             <!--table-->
             <wicket:container wicket:id="checkgroup-mapped">
                 <div class="s-mapping-table">
                     <div class="s-mapping-header row-fluid">
                         <div class="span1 s-mapping-chb-item"><input type="checkbox" wicket:id="master-checkbox-map"/></div>
                         <div class="span11">Granted <span wicket:id="mapped-item-name"></span></div>
                     </div>

                     <ul id="mapped-list" class="s-mapping-body unstyled">
                         <li class="s-mapping-row row-fluid" wicket:id="mapped-list">
                             <div class="span1 s-mapping-chb-item"><input type="checkbox" wicket:id="selected" /></div>
                             <div class="span11" wicket:id="mapped-name"></div>
                         </li>
                     </ul>

                 </div>
             </wicket:container>
         </div>
     </div>

</form>
    <script type="text/javascript" src="js/jquery.livesearch.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#unmapped-query").fastLiveFilter('#unmapped-list').focus();
            $("#mapped-query").fastLiveFilter('#mapped-list');
        });
    </script>
</wicket:panel>
</body>
</html>